import { useTheme } from "next-themes"
import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"

import { useConfig } from "~/hooks/use-config"
import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import { baseColors } from "~/registry/registry-base-colors"

const data = [
   {
      average: 400,
      today: 240,
   },
   {
      average: 300,
      today: 139,
   },
   {
      average: 200,
      today: 980,
   },
   {
      average: 278,
      today: 390,
   },
   {
      average: 189,
      today: 480,
   },
   {
      average: 239,
      today: 380,
   },
   {
      average: 349,
      today: 430,
   },
]

export function CardsMetric() {
   const { theme: mode } = useTheme()
   const [config] = useConfig()

   const baseColor = baseColors.find(
      (baseColor) => baseColor.name === config.theme,
   )

   return (
      <Card>
         <CardHeader>
            <CardTitle>Exercise Minutes</CardTitle>
            <CardDescription>
               Your exercise minutes are ahead of where you normally are.
            </CardDescription>
         </CardHeader>
         <CardContent className="pb-4">
            <div className="h-[200px]">
               <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                     data={data}
                     margin={{
                        top: 5,
                        right: 10,
                        left: 10,
                        bottom: 0,
                     }}
                  >
                     <Tooltip
                        content={({ active, payload }) => {
                           if (active && payload && payload.length) {
                              return (
                                 <div className="bg-background rounded-lg border p-2 shadow-sm">
                                    <div className="grid grid-cols-2 gap-2">
                                       <div className="flex flex-col">
                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
                                             Average
                                          </span>
                                          <span className="text-muted-foreground font-bold">
                                             {payload[0].value}
                                          </span>
                                       </div>
                                       <div className="flex flex-col">
                                          <span className="text-muted-foreground text-[0.70rem] uppercase">
                                             Today
                                          </span>
                                          <span className="font-bold">
                                             {payload[1].value}
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                              )
                           }

                           return null
                        }}
                     />
                     <Line
                        type="monotone"
                        strokeWidth={2}
                        dataKey="average"
                        activeDot={{
                           r: 6,
                           style: {
                              fill: "var(--theme-primary)",
                              opacity: 0.25,
                           },
                        }}
                        style={
                           {
                              stroke: "var(--theme-primary)",
                              opacity: 0.25,
                              "--theme-primary": `hsl(${
                                 baseColor?.cssVars[
                                    mode === "dark" ? "dark" : "light"
                                 ].primary
                              })`,
                           } as React.CSSProperties
                        }
                     />
                     <Line
                        type="monotone"
                        dataKey="today"
                        strokeWidth={2}
                        activeDot={{
                           r: 8,
                           style: { fill: "var(--theme-primary)" },
                        }}
                        style={
                           {
                              stroke: "var(--theme-primary)",
                              "--theme-primary": `hsl(${
                                 baseColor?.cssVars[
                                    mode === "dark" ? "dark" : "light"
                                 ].primary
                              })`,
                           } as React.CSSProperties
                        }
                     />
                  </LineChart>
               </ResponsiveContainer>
            </div>
         </CardContent>
      </Card>
   )
}
